<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二分查找示例</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fc;
            margin: 0;
            padding: 0;
            color: #333;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            flex-direction: column;
        }

        h1 {
            color: #3b3f58;
            margin-bottom: 20px;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group input {
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            margin-right: 10px;
            width: 150px;
            margin-bottom: 10px;
        }

        .btn {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #45a049;
        }

        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            width: 300px;
            text-align: center;
        }

        .result p {
            font-size: 18px;
            color: #3b3f58;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>二分查找示例</h1>

        <div class="input-group">
            <input type="text" id="arrayInput" placeholder="输入数组（如：1,2,3,4,5）">
            <input type="number" id="itemInput" placeholder="输入要查找的数字">
            <button class="btn" onclick="performBinarySearch()">执行查找</button>
        </div>

        <div class="result" id="result">
            <p>结果将在这里显示</p>
        </div>
    </div>

    <script>
        // 二分查找函数
        const binarySearch = (arr, item) => {
            let l = 0,
                r = arr.length - 1;
            while (l <= r) {
                const m = Math.floor((l + r) / 2);
                if (arr[m] === item) {
                    return m;
                } else if (arr[m] > item) {
                    r = m - 1;
                } else {
                    l = m + 1;
                }
            }
            return -1;
        };

        // 执行二分查找的函数
        function performBinarySearch() {
            const arrayInput = document.getElementById('arrayInput').value;
            const itemInput = parseInt(document.getElementById('itemInput').value);

            // 转换输入的数组为数组格式
            const arr = arrayInput.split(',').map(num => parseInt(num.trim()));

            // 判断输入是否合法
            if (arr.length === 0 || isNaN(itemInput)) {
                document.getElementById('result').innerHTML = '<p style="color: red;">请输入有效的数组和数字！</p>';
                return;
            }

            // 调用二分查找函数
            const result = binarySearch(arr, itemInput);

            // 显示结果
            if (result === -1) {
                document.getElementById('result').innerHTML = `<p>数字 ${itemInput} 不在数组中。</p>`;
            } else {
                document.getElementById('result').innerHTML = `<p>数字 ${itemInput} 在数组中的索引是: ${result}</p>`;
            }
        }
    </script>
</body>

</html>